<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
</head>

<body>
    <script>
        // this 是谁：谁调用就是谁. xxx.func()
        // 看不出来谁调用，一般是 window

        // 全局的变量都相当于是添加给了 window对象
        // 鸿蒙中没有这个对象
        function sayHi() {
            console.log('sayHi:', this)
        }
        // sayHi()

        // 能够看出来谁调用
        const person = {
            name: '小李子',
            film: ['jump together'],
            skill: '不抗冻，不要跳冰水',
            // 给对象设置一个方法
            sayHi() {
                console.log('sayHi', this)
            },
            sayHello: () => {
                console.log('sayHello', this)
            },
            sayHiPlus() {
                console.log('sayHiPlus', this) // this? person
                    // setTimeout(function () {
                    //   // 没有通过任何方式指定 this
                    //   console.log('sayHiPlus', this) // this? window
                    // }, 1000)
                setTimeout(() => {
                    // 没有通过任何方式指定 this
                    console.log('sayHiPlus', this) // this? window
                    setTimeout(() => {
                        // 没有通过任何方式指定 this
                        console.log('sayHiPlus', this) // this? window
                        setTimeout(() => {
                            // 没有通过任何方式指定 this
                            console.log('sayHiPlus', this) // this? window
                        }, 1000)
                    }, 1000)
                }, 1000)
            },
        }

        // person点的，sayHi 中目前是 person
        // person.sayHi()

        // sayHello 绑定的是 箭头函数
        // 箭头函数：创建时会绑定当前作用域中的 this，如果有的话
        // 当前作用域没有 this，向上一级去找，找到全局为止，还找不到。window
        // 常见的作用域：函数作用域。块级作用域，模块作用域，全局作用域
        // person.sayHello()

        // person.sayHiPlus()

        // 面试话术：
        /**
         * 聊到了 this，聊到了箭头函数。聊到了坑点
         * this 这个东西在JS 和 TS 中都很灵活，因为会动态的改变，但是有一些记忆的规则：
         *  谁调用就是谁，看不出来谁调用，一般是全局对象，如果实在浏览器中，这个对象是 window
         * 也有特殊情况，比如箭头函数，创建的时候 this 就绑定了，绑定的是上一级作用域中的 this，比如函数作用域，块级作用域，全局，模块。。
         * 箭头函数，在鸿蒙开发中经常需要使用，因为如果不指定 this 可能出现指向错误的问题，导致无法正常取值，buildParams 中，子通过回调函数传递数据给父组件，也需要通过箭头函数，这两个是比较常见的，我也掉过坑
         * 在 js 中早期还有一些更灵活的写法，比如 call，apply，bind，但是有了箭头函数之后一般不需要使用他们了。
         * 【下一句，看是否准备了】之前研究 this 指向的时候看过，还自己手写过
         * */
    </script>
</body>

</html>